import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { createAddPersonAction } from '../../redux/actions/persons'
class Person extends Component {
    addPerson = () => {
        const name = this.nameNode.value
        const age = this.ageNode.value
        const personObj = { id: nanoid(), name, age }
        console.log(personObj);
        this.props.jiayiren(personObj)
    }
    render() {
        return (
            <div>
                <input ref={c => this.nameNode = c} type="text" placeholder="名字" />
                <input ref={c => this.ageNode = c} type="text" placeholder="年龄" />
                <button onClick={this.addPerson}>添加</button>
                <h1>{this.props.number}</h1>
                <ul>
                    {
                        this.props.yiduiren.map((v) => {
                            return <li key={v.id}>{v.name}---{v.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
export default connect(
    state => ({ yiduiren: state.rens,number:state.he }),//映射状态
    { jiayiren: createAddPersonAction }//映射操作状态的方法
)(Person)